<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        img {
            width:150px;
        }

        .commodity {
            margin: 20px 20px;
            width: 160px;
            border: 3px solid red;
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>商品列表:</h2>
        <commodity v-for="(arr,index) in arrs" :arr="arr"></commodity>
    </div>
</body>
<script>
    let commodity = {
        props: ['arr'],
        template: '<div class="commodity"><table><tr>商品{{arr.num}}:<b>{{arr.name}}</b></tr><td><img v-bind:src="arr.img"></td></table></div>',
    };

    
    new Vue({
        el: "#app",
        data: {
            arrs: [
                { num: '1', name: '手表', img:'https://img12.360buyimg.com/seckillcms/s280x280_jfs/t1/180643/5/22058/104008/62454b78E119d150c/199912d8cdb00212.jpg.webp'},
                { num: '2', name: '手机', img:'https://img30.360buyimg.com/seckillcms/s280x280_jfs/t1/220366/20/3753/61112/618a46e0E4a14bb1a/ceb318079af6ca77.jpg.webp'},
                { num: '3', name: '茅台', img:'https://img30.360buyimg.com/seckillcms/s280x280_jfs/t1/134989/34/26758/133443/6248317eEab0553b1/9c89f9a44f567f82.jpg.webp'},
            ]
        },
        components: {
           commodity:commodity,
        }
    });
</script>

</html>